<template>
  <div>
    <form>
      <!--昵称-->
      <view class="name">
<view class="left">
 昵称
</view>
   <view class="right">
     <input type="text" placeholder="最多能输入7个字">
   </view>
 </view>
      <!--年龄-->
      <view class="age">
        <view class="left">
          年龄
        </view>
        <view class="right">
          <input type="text" placeholder="永远的18岁">
        </view>
      </view>
      <!--性别-->
      <view class="sex">
        <view class="left">
         性别
        </view>
        <view class="right">
          <view class="big-circle" @click="chooceSex(0) "v-bind:class="{active:sex===0}">
            <view class="small-cilcle" v-show="sex===0"></view>
          </view>
          <view class="sex-value">女</view>
          <view class="big-circle" @click="chooceSex(1) "v-bind:class="{active:sex===1}">
          <view class="small-cilcle2" v-show="sex===1"></view>
        </view>
          <view class="sex-value">男</view>

        </view>
      </view>
<button class="sure-btn">确认</button>

    </form>
  </div>
</template>

<script>
    export default {
      data(){
        return{
        sex:0,
        }
      },
      methods:{
      chooceSex:function (current) {

          if (this.sex === current) {
            return;
          }
          this.sex = current;

        },

}

    }
</script>

<style scoped>

/*昵称*/
  .name,.age,.sex{
  width:100%;
  height:88rpx;
  margin-left: 40rpx;
  border-bottom: 1rpx solid #eeeeee;
}
  .left{
    width:56rpx;
    height:88rpx;
    font-size: 28rpx;
    color: #666;
    padding: 24rpx 0rpx 24rpx 0rpx;
    box-sizing: border-box;
    float: left;
  }
  .right{
    float: left;
    margin-left: 40rpx;
    font-size: 32rpx;
    color: #333;
    padding:22rpx 0 22rpx 0;
    box-sizing: border-box;
  }
  .age,.sex{
  clear: both;
   }
/*性别*/
.big-circle{
  width:32rpx;
  height:32rpx;
  border-radius: 50%;
  border: 1rpx solid #999;
  margin-right: 18rpx;
  position: relative;
  float: left;
}
.small-cilcle{
  width:10rpx;
  height:10rpx;
  border-radius: 50%;
  background: #ff6d6d;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);

}
.small-cilcle2{
  width:10rpx;
  height:10rpx;
  border-radius: 50%;
  background: #ff6d6d;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);

}
.active{
  border: 1rpx solid #ff6d6d;
}

.sex-value{
  font-size: 32rpx;
  color: #333;
  float: left;
  margin-right: 70rpx;

}
/*确定按钮*/
.sure-btn{
  margin-top: 100rpx;
  width:452rpx;
  height:80rpx;
  background: #FF6D6D;
  border: 2rpx solid #FF6D6D;
  border-radius: 8rpx;
  color:#fff;
  font-size: 36rpx;
  line-height: 80rpx;
}
</style>
